<template>
  <aside>
    <header></header>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      :collapse="store.isCollapse"
      @open="handleOpen"
      @close="handleClose"
      background-color="#001529"
      text-color="#fff"
      :router="true"
      :unique-opened="true"
    >
      <template
        v-if="adminname === 'admin'"
        v-for="item in menuList"
        :key="item.key"
      >
        <el-menu-item v-if="!item.children" :index="item.key">
          <el-icon>
            <component :is="item.icon"></component>
          </el-icon>
          <template #title>{{ item.title }}</template>
        </el-menu-item>

        <el-sub-menu v-else :index="item.key">
          <template #title>
            <el-icon><component :is="item.icon"></component></el-icon>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item v-for="val in item.children" :index="val.key">
            <template #title>{{ val.title }}</template>
          </el-menu-item>
        </el-sub-menu>
      </template>
      <template v-else v-for="item in menuList">
        <el-menu-item
          v-if="!item.children && checkedKeys.includes(item.key)"
          :index="item.key"
        >
          <el-icon>
            <component :is="item.icon"></component>
          </el-icon>
          <template #title>{{ item.title }}</template>
        </el-menu-item>

        <el-sub-menu
          v-if="item.children && checkedKeys.includes(item.key)"
          :index="item.key"
        >
          <template #title>
            <el-icon><component :is="item.icon"></component></el-icon>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item v-for="val in item.children" :index="val.key">
            <template #title v-if="checkedKeys.includes(val.key)">{{
              val.title
            }}</template>
          </el-menu-item>
        </el-sub-menu>
      </template>

      <!-- <el-menu-item index="1">
        <el-icon><icon-menu /></el-icon>
        <template #title>系统首页</template>
      </el-menu-item>

      <el-sub-menu index="2">
        <template #title>
          <el-icon><location /></el-icon>
          <span>轮播图管理</span>
        </template>
        <el-menu-item index="2-1">
          <template #title>轮播图列表</template>
        </el-menu-item>
        <el-menu-item index="2-2">
          <template #title>添加轮播图</template>
        </el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="3">
        <template #title>
          <el-icon><location /></el-icon>
          <span>产品管理</span>
        </template>
        <el-menu-item index="3-1">
          <template #title>产品列表</template>
        </el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="4">
        <template #title>
          <el-icon><location /></el-icon>
          <span>账号管理</span>
        </template>
        <el-menu-item index="4-1">
          <template #title>用户列表</template>
        </el-menu-item>
        <el-menu-item index="4-2">
          <template #title>管理员列表</template>
        </el-menu-item>
      </el-sub-menu>

      <el-menu-item index="5">
        <el-icon><icon-menu /></el-icon>
        <template #title>数据可视化</template>
      </el-menu-item>

      <el-sub-menu index="6">
        <template #title>
          <el-icon><location /></el-icon>
          <span>编辑器</span>
        </template>
        <el-menu-item index="6-1">
          <template #title>富文本编辑器</template>
        </el-menu-item>
        <el-menu-item index="6-2">
          <template #title>MD编辑器</template>
        </el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="7">
        <template #title>
          <el-icon><location /></el-icon>
          <span>文件处理</span>
        </template>
        <el-menu-item index="7-1">
          <template #title>导出excel</template>
        </el-menu-item>
        <el-menu-item index="7-2">
          <template #title>导入excel</template>
        </el-menu-item>
      </el-sub-menu>

      <el-menu-item index="8">
        <el-icon><icon-menu /></el-icon>
        <template #title>高德地图</template>
      </el-menu-item> -->
    </el-menu>
  </aside>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useHomeStore } from "@/stores/home";

import menuList from "@/assets/js/menuList";

const store = useHomeStore();

const checkedKeys = JSON.parse(sessionStorage.getItem("checkedKeys") || "[]");
const adminname = sessionStorage.getItem("adminname");

// import {
//   Document,
//   Menu as IconMenu,
//   Location,
//   Setting,
// } from "@element-plus/icons-vue";

// const isCollapse = ref<boolean>(false);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style lang="less" scoped>
header {
  margin: 20px;
  height: 50px;
  background: pink;
}

.el-menu {
  border-right: 1px solid #000;
}
</style>
